
<template>
  <div class="app-container">
    <!-- 搜索表单 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="分类状态">
        <el-select v-model="queryParams.status" placeholder="请选择" clearable style="width: 240px">
          <el-option label="正常" value="1"/>
          <el-option label="禁用" value="2"/>
        </el-select>
      </el-form-item>
      <el-form-item label="分类名称">
        <el-input
            v-model="queryParams.name"
            placeholder="请输入分类名称"
            clearable
            style="width: 240px"
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作按钮 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
        >新增一级分类
        </el-button>
      </el-col>
    </el-row>

    <!-- 分类列表 -->
    <el-table
        v-loading="loading"
        :data="categoryList"
        row-key="id"
        :default-expand-all="isExpandAll"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        style="width: 100%"
    >
      <el-table-column prop="name" label="分类名称"/>
      <el-table-column prop="parent_id" label="父分类ID" width="100"/>
      <el-table-column prop="level" label="分类级别" width="100"/>
      <el-table-column prop="priority" label="优先级" width="80"/>
      <el-table-column prop="status" label="状态" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.status === 1 ? '正常' : '禁用' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="创建时间" width="180"/>
      <el-table-column prop="update_time" label="更新时间" width="180"/>
      <el-table-column label="操作" align="center" width="300">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)">添加下级分类</el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
          <el-button size="mini" type="text" icon="el-icon-circle-check" @click="handleDisable(scope.row)">禁用
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/编辑分类弹窗 -->
    <el-dialog :title="title" :visible.sync="open" width="400px">
      <el-form :model="form" :rules="rules" ref="form" label-width="120px">
        <el-form-item label="所属上级分类" prop="parentName">
          <el-input v-model="form.parentName" readonly placeholder="请选择上级分类"/>
        </el-form-item>
        <el-form-item label="分类名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入分类名称" maxlength="15"/>
        </el-form-item>
        <el-form-item label="分类级别" prop="level">
          <el-input v-model="form.level" placeholder="请输入分类级别"/>
        </el-form-item>
        <el-form-item label="优先级" prop="priority">
          <el-input-number v-model="form.priority" :min="0"/>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="form.status" placeholder="请选择" clearable>
            <el-option label="正常" value="1"/>
            <el-option label="禁用" value="2"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open = false">取消</el-button>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
```

### Script 部分

```javascript
<script setup name="CategoryManagement">
import {reactive, ref} from 'vue';
import {ElMessage} from 'element-plus';
import * as categoryApi from '@/api/course/category'; // 引入API方法

const categoryList = ref([]);
const open = ref(false);
const loading = ref(false);
const showSearch = ref(true);
const title = ref('');
const isExpandAll = ref(true);
const form = reactive({
  id: undefined,
  parent_id: undefined,
  parentName: '',
  name: '',
  level: 1,
  priority: 1,
  status: 1,
});
const rules = reactive({
  name: [
    {required: true, message: '请输入分类名称', trigger: 'blur'},
    {min: 1, max: 15, message: '分类名称长度不超过15个字符', trigger: 'blur'}
  ],
  level: [
    {required: true, message: '请输入分类级别', trigger: 'blur'}
  ],
  priority: [
    {required: true, message: '请输入优先级', trigger: 'blur'}
  ]
});

const queryParams = reactive({
  status: undefined,
  name: undefined
});

function getList() {
  loading.value = true;
  categoryApi.listCategory(queryParams).then(res => {
    loading.value = false;
    if (res && Array.isArray(res.rows) && res.rows.length > 0) {
      categoryList.value = res.rows;
      ElMessage.success('获取分类列表成功');
    } else {
      categoryList.value = [];
      ElMessage.warning('没有查询到任何数据');
    }
  }).catch(error => {
    loading.value = false;
    let errorMessage = '获取分类列表失败: 未知错误';
    if (error && error.response && error.response.data) {
      errorMessage = '获取分类列表失败: ' + (error.response.data.message || '无具体错误信息');
    } else if (error) {
      errorMessage = '请求失败: ' + (error.message || '无具体错误信息');
    }
    ElMessage.error(errorMessage);
  });
}

function handleQuery() {
  getList();
}

function resetQuery() {
  queryParams.status = undefined;
  queryParams.name = undefined;
  getList();
}

function handleAdd(parentNode) {
  title.value = parentNode ? '添加下级分类' : '新增一级分类';
  form.id = undefined;
  form.parent_id = parentNode ? parentNode.id : 0;
  form.parentName = parentNode ? parentNode.name : '';
  form.name = '';
  form.level = parentNode ? (parentNode.level + 1) : 1;
  form.priority = 1;
  form.status = 1;
  open.value = true;
}

function handleUpdate(row) {
  title.value = '编辑分类';
  form.id = row.id;
  form.parent_id = row.parent_id;
  form.parentName = row.parent_id ? this.getParentName(row.parent_id) : '';
  form.name = row.name;
  form.level = row.level;
  form.priority = row.priority;
  form.status = row.status;
  open.value = true;
}

function submitForm() {
  this.$refs.form.validate((valid) => {
    if (valid) {
      const apiCall = form.id ? categoryApi.updateCategory : categoryApi.addCategory;
      apiCall(form).then(response => {
        open.value = false;
        getList();
        ElMessage.success(form.id ? '更新分类成功' : '新增分类成功');
      }).catch(error => {
        loading.value = false;
        if (error && error.response) {
          ElMessage.error(form.id ? '更新分类失败: ' + error.response.data.message : '新增分类失败: ' + error.response.data.message);
        } else {
          ElMessage.error(form.id ? '更新分类失败: 未知错误' : '新增分类失败: 未知错误');
        }
      });
    }
  });
}

function handleDelete(row) {
  this.$confirm('确定要删除此分类吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    categoryApi.deleteCategory(row.id).then(response => {
      getList();
      ElMessage.success('删除分类成功');
    }).catch(error => {
      if (error && error.response) {
        ElMessage.error('删除分类失败: ' + error.response.data.message);
      } else {
        ElMessage.error('删除分类失败: 未知错误');
      }
    });
  }).catch(() => {
    ElMessage.info('取消删除');
  });
}

function handleDisable(row) {
  const newStatus = row.status === 1 ? 2 : 1;
  const action = newStatus === 1 ? '启用' : '禁用';
  this.$confirm(`确定要${action}此分类吗?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    categoryApi.disableCategory(row.id, newStatus).then(response => {
      getList();
      ElMessage.success(`${action}分类成功`);
    }).catch(error => {
      if (error && error.response) {
        ElMessage.error(`${action}分类失败: ${error.response.data.message}`);
      } else {
        ElMessage.error(`${action}分类失败: 未知错误`);
      }
    });
  }).catch(() => {
    ElMessage.info('取消操作');
  });
}

function getParentName(parentId) {
  const parent = categoryList.value.find(item => item.id === parentId);
  return parent ? parent.name : '未知分类';
}



// 调用getList来加载初始数据
getList();
</script>
<style scoped>
.app-container {
  padding: 20px;
}

.mb8 {
  margin-bottom: 8px;
}
</style>